{% extends "V.html" %}

{% block head %}
<!--script src="/static/matrix/js/matrix.chat.js"></script-->
<script type="text/javascript" src="/static/matrix/js/toastr.js"></script>
<script type="text/javascript" src="/static/matrix/js/echarts.min.js"></script>

<!-- <script type="text/javascript" src="/static/matrix/js/matrix.interface.js"></script> -->
<script type="text/javascript">
  $(document).ready(function(){
    // 天气api
    $.ajax({
      type:'GET',
      url:'http://wthrcdn.etouch.cn/weather_mini?city=深圳',
      dataType:'json',
      success:function(val){
        console.log(val)
        // console.log(val.data.city)
        // console.log(val.data.wendu)
        // for(var i=0;i<val.data.forecast.length;i++){
          // console.log(val.data.forecast[0].date)
        // }
        // $("#weather").html('城市:'+val.data.city+','+'温度:'+val.data.wendu+'℃,'+'天气:'+val.data.forecast[0].type+';|'+'温馨提醒:'+val.data.ganmao)
        $("#weather").html('城市:'+val.data.city+','+'温度:'+val.data.wendu+'℃,'+'天气:'+val.data.forecast[0].type+';')
      },error:function(){
        $("#weather").html("天气api失效，请及时更新")   
      }

    });
    //画图数据
    $.ajax({
      type:'POST',
      url:'/alarm_data/alarminfo_charts',
      data:{'text':24},
      dataType:'json',
      beforeSend:function(){
      $("#main").css({"text-align":"center","line-height":"400px"}).html('数据正在加载中...');
      },
      success:function(val){
        // console.log(val)
        if(val){
          $("#main").html('');
          var timearray = []
          var statusarray = ['PROBLEM','OK','COUNT']
          var COUNT_DATA = []
          var OK_DATA = []
          var PROBLEM_DATA = []     
          for ( var i=0;i<val.day_count.length;i++){
            timearray[i]=val.day_count[i].DATE
            COUNT_DATA[i] = val.day_count[i].COUNT
            OK_DATA[i] = val.day_count[i].OK
            PROBLEM_DATA[i] = val.day_count[i].PROBLEM
          }
          Charts(statusarray,timearray,COUNT_DATA,OK_DATA,PROBLEM_DATA)
        }
        // else{
        //  layer.alert("告警加载失败01");
        // }
      }
      // ,error:function(){
      //  layer.alert("告警加载失败02");
      // }
    });
    
    //统计数据
    var parameters=['baseinfo_count','configinfo_count','businessinfo_count','platforminfo_count','assetinfo_count','domaininfo_count','dnsinfo_count','assetinfo_type','assetinfo_user','assetinfo_dept','one_hour_problem','one_hour_ok','one_day_problem','one_day_ok','user_count','superuser_count','group_count','last_login','items_schedule','items_done','items_notice','items_schedule_last','items_done_last','items_notice_last',];
    $.ajax({
      type:'POST',
      url:'/loadDashboard/',
      data:{'text':24},
      dataType:'json',
      success:function(val){
        // var parameters=['baseinfo_count','configinfo_count','businessinfo_count','platforminfo_count','assetinfo_count'];
        console.log(val.rows)
        // console.log(val.rows.baseinfo_count)
        for(var i=0;i<parameters.length;i++){
          // var rows=val.rows;
          if(parameters[i] =='last_login'){
            var last_login_str=val.rows['last_login']
            for(var j=0;j<last_login_str.split('|').length-1;j++){
              $("#last_username").append('<br>'+last_login_str.split('|')[j].split(',')[0]+'&nbsp;&nbsp;&nbsp;&nbsp;<br>')
              $("#last_name").append('<br>'+last_login_str.split('|')[j].split(',')[1]+'<br>')
              $("#last_time").append('<br>'+last_login_str.split('|')[j].split(',')[2]+'<br>')
            }
          }else{
            $("#"+parameters[i]).html(val.rows[parameters[i]])
            //待办事项面板展示
            if($("#items_schedule").html()==0){
              // $("#items_schedule_last").html(val.rows['items_schedule_last'])
              $("#items_schedule_url").attr("href",'')
              $("#items_schedule_more").html("0")
            }else if($("#items_schedule").html()==1){
              $("#items_schedule_url").attr("href",'/em/detail/'+val.rows['items_schedule_last_id']+'/')
              $("#items_schedule_more").html("0")
            }else{
              $("#items_schedule_url").attr("href",'/em/detail/'+val.rows['items_schedule_last_id']+'/')
              $("#items_schedule_more").html(val.rows['items_schedule']-1)
            }
            //已办事项面板展示
            if($("#items_done").html()==0){
              // $("#items_done_last").html("当前已待办事项")
              $("#items_done_url").attr("href",'')
              $("#items_done_more").html("0")
            }else if($("#items_done").html()==1){
              // $("#items_done_last").html("第一条已办事项")
              $("#items_done_url").attr("href",'/em/detail/'+val.rows['items_done_last_id']+'/')
              $("#items_done_more").html("0")
            }else{
              // $("#items_done_last").html("第一条已办事项")
              $("#items_done_url").attr("href",'/em/detail/'+val.rows['items_done_last_id']+'/')
              $("#items_done_more").html(val.rows['items_done']-1)
            }   
            //知会事项面板展示
            if($("#items_notice").html()==0){
              // $("#items_notice_last").html("当前无知会事项")
              $("#items_notice_url").attr("href",'')
              $("#items_notice_more").html("0")
            }else if($("#items_notice").html()==1){
              // $("#items_notice_last").html("第一条知会事项")
              $("#items_notice_url").attr("href",'/em/Notice_detail/'+val.rows['items_notice_last_id']+'/')
              $("#items_notice_more").html("0")
            }else{
              // $("#items_notice_last").html("第一条知会事项")
              $("#items_notice_url").attr("href",'/em/Notice_detail/'+val.rows['items_notice_last_id']+'/')
              $("#items_notice_more").html(val.rows['items_notice']-1)
            }

          }
        if($("#one_hour_problem").html() == 0 ){
          // alert("有告警")
          $("#warring01").html("")
        }else{
          $("#warring01").html('&nbsp;<span class="date badge badge-important">有告警啦</span>')
        }
        }

      },error:function(){
        console.log('失败')
      }
    });

  });
  




  function Charts(legend,xdata,COUNT_DATA,OK_DATA,PROBLEM_DATA){
    var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '告警统计折线图',
                left:'42%'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:legend,
                right:30
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : xdata,
                    // name : '告警时间',
                    nameLocation : 'middle',
                    nameGap : 30
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '告警数量统计(次)',
                    nameLocation : 'middle',
                    nameGap : 30
                }
            ],
            series : [
                {
                    name:'PROBLEM',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:PROBLEM_DATA
                },
                {
                    name:'OK',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:OK_DATA
                },
                {
                    name:'COUNT',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:COUNT_DATA
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.onresize = myChart.resize;
  }

  //乌云搜索库切换
  function gradeChange(){var objS=document.getElementById("pid");var grade=objS.options[objS.selectedIndex].value;document.getElementById("iden").value=grade;}

</script>

{% endblock %}

{% block content %}
<!-- 承上连接V.html：content+content-header -->

<!--Action boxes-->
  <div class="container-fluid">
<!--     <div class="quick-actions_homepage">
      <ul class="quick-actions">
        <li class="bg_lg span3"><a><i class="icon-info-sign"></i> test</a> </li>
        {% for key,value in apps.items %}
        <li class="bg_lr span3"> <a href="{{ value.url }}"> <i class="icon-info-sign"></i> {{ value.name }}</a> </li>
        {% endfor %}

      </ul>
    </div> -->
    <!--WooYun Search-->
    <div id="search" style="display:inline;float:right;position:relative;right:0px;">
      <form action="/wooyun/search.php?kind=bugs" target="_blank" method="GET" name="dir">
        <input type="hidden" name="kind" value="bugs" id="iden">
        <select style="float:left;width:auto;border:none;" id="pid" onchange="gradeChange()">
          <option value="bugs">漏洞库/40293</option>
          <option value="drops">知识库/1269</option>
        </select>
        <input name="keywords" placeholder="乌云一下" type="text" style="float:left;background-color:white;color:black;"></input>
        <button class="tip-bottom" type="submit" title="WooYun Search" style="margin-top:0px;"><i class="icon-search icon-white"></i></button>
      </form>
    </div>

    <div >
        <ul id="myTab" class="nav nav-tabs">
           <li class="active"><a href="" data-toggle="tab">开始</a></li>
           <li ><a id='weather'></a></li>
        </ul>
    </div>

    <div class="row-fluid ">
      <div class="span3">
        <div class="accordion" id="collapse-group">
          <div class="accordion-group widget-box">
            <div class="accordion-heading">
              <div class="widget-title"> <a data-parent="#collapse-group" href="#collapseGOne" data-toggle="collapse"> <span class="icon"><i class="icon-calendar"></i></span>
                <h5>今日待办事项( <span style="color:green;font-size:12px;font-family:Arial;font-weight:bold" id="items_schedule">null</span> )</h5>
                <!-- </a> <a href=""><span class="icon"><i class="icon-forward"></i></span></a></div> -->
                </a></div>
  
            </div>
            <div class="collapse in accordion-body" id="collapseGOne">
              <div class="widget-content" >
                <div class="todo" >
                  <ul>
                    <li class="clearfix" >
                      <div class="txt" >待办事项:&nbsp;<span id="items_schedule_last" style="color:green;font-weight:bold">null</span></div>
                      <div class="pull-right"> <a class="tip" id="items_schedule_url" title="处理"><i class="icon-pencil"></i></a></div>
                    </li>
                    <li class="clearfix">
                      <div class="txt" >您还有 <span id="items_schedule_more" style="color:green;font-weight:bold">null</span> 条的待办事项</div>
                      <div class="pull-right"> <a class="tip" href="/em/Item_list/schedule" title="更多"><i class="icon-reorder"></i></a></div>
                    </li>                      
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="accordion-group widget-box">
            <div class="accordion-heading">
              <div class="widget-title"> 
                <a data-parent="#collapse-group" href="#collapseGTwo" data-toggle="collapse"> <span class="icon"><i class="icon-check"></i></span>
                <h5>已办事项( <span style="color:orange;font-size:12px;font-family:Arial;font-weight:bold" id="items_done">null</span> )</h5>
                </a>
                 </div>
            </div>
            <div class="collapse accordion-body" id="collapseGTwo">
              <div class="widget-content">
                <div class="todo">
                  <ul>
                    <li class="clearfix">
                      <div class="txt">已办事项:&nbsp;<span id="items_done_last" style="color:orange;font-weight:bold">null</span></div>
                      <div class="pull-right"> <a class="tip" id="items_done_url" title="查看"><i class="icon-folder-open"></i></a></div>
                    </li>
                    <li class="clearfix">
                      <div class="txt">您还有 <span id="items_done_more" style="color:orange;font-weight:bold">null</span> 条的已办事项</div>
                      <div class="pull-right"> <a class="tip" href="/em/Item_list/done" title="更多"><i class="icon-reorder"></i></a></div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="accordion-group widget-box">
            <div class="accordion-heading">
              <div class="widget-title"> <a data-parent="#collapse-group" href="#collapseGThree" data-toggle="collapse"> <span class="icon"><i class="icon-comment"></i></span>
                <h5>知会事项( <span style="color:blue;font-size:12px;font-family:Arial;font-weight:bold" id="items_notice">null</span> )</h5>
                </a> </div>
            </div>
            <div class="collapse accordion-body" id="collapseGThree">
              <div class="widget-content">
                <div class="todo">
                  <ul>
                    <li class="clearfix">
                      <div class="txt">知会事项:&nbsp;<span id="items_notice_last" style="color:blue;font-weight:bold">null</span></div>
                      <div class="pull-right"> <a class="tip" id="items_notice_url" title="查看"><i class="icon-folder-open"></i></a></div>
                    </li>
                    <li class="clearfix">
                      <div class="txt">您还有 <span id="items_notice_more" style="color:blue;font-weight:bold">null</span> 条的知会事项</div>
                      <div class="pull-right"> <a class="tip" href="/em/Items_notice" title="更多"><i class="icon-reorder"></i></a></div>
                    </li>
                  </ul>
                </div>

              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="span3">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-cloud"></i></span>
            <span class="label label-success pull-right "><a href="/info/baseinfo.html"><font color=#EEEEEE>点击详情</font></a></span>
            <h5>云资源及业务统计</h5>
          </div>
          <div class="widget-content">
            <div class="todo">
              <ul>
                <li class="clearfix">
                  <div class="txt" ><strong><a id= 'baseinfo_count' href="/info/baseinfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;条云主机资源</small> 
                    <!-- <span class="date badge badge-important">今日有更新</span></div> -->
                </li>
                <li class="clearfix">
                  <div class="txt" ><strong><a id= 'configinfo_count' href="/info/hostconfig.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;条主机配置信息</small></div>
                </li>
                <li class="clearfix">
                  <div class="txt" ><strong><a id= 'businessinfo_count' href="/info/businessinfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;条业务线</small></div>
                </li>
                <li class="clearfix">
                  <div class="txt" ><strong><a id= 'platforminfo_count' href="/info/platforminfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;家云平台</small></div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="span3">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-briefcase"></i></span>
            <span class="label label-success pull-right "><a href="/asset/assetinfo.html"><font color=#EEEEEE>点击详情</font></a></span>
            <h5>硬件资产</h5>
          </div>
          <div class="widget-content">
            <div class="todo">
              <ul>
                <li class="clearfix">
                  <div class="txt" ><strong><a id='assetinfo_count' href="/asset/assetinfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;条硬件资产</small></div>
                </li>
                <li class="clearfix">
                  <div class="txt" ><strong><a id='assetinfo_type' href="/asset/assetinfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;种资产类型</small></div>
                </li>
                <li class="clearfix">
                  <div class="txt" ><strong><a id='assetinfo_user' href="/asset/assetinfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;个人在使用</small></div>
                </li>
                <li class="clearfix">
                  <div class="txt" ><strong><a id='assetinfo_dept' href="/asset/assetinfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;个部门都在使用</small></div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="span3">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-bell"></i></span>
            <span class="label label-success pull-right "><a href="/alarm/alarminfo.html"><font color=#EEEEEE>点击详情</font></a></span>
            <h5>告警信息</h5>
          </div>
          <div class="widget-content">
            <div class="todo">
              <ul>
                <li class="clearfix">
                  <div class="txt" ><strong><a id='one_hour_problem' href="/alarm/alarminfo.html" style="color:red;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;条告警信息(过去1小时)</small><a id = 'warring01'></a></div>
                </li>
                <li class="clearfix">
                  <div class="txt" ><strong><a id='one_hour_ok' href="/alarm/alarminfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;条恢复信息(过去1小时)</small></div>
                </li>
                <li class="clearfix">
                  <div class="txt" ><strong><a id='one_day_problem' href="/alarm/alarminfo.html" style="color:red;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;条告警信息(过去1天)</small></div>
                </li>
                <li class="clearfix">
                  <div class="txt" ><strong><a id='one_day_ok' href="/alarm/alarminfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;条恢复信息(过去1天)</small></div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div id="main" style="width: 1200px;height:300px;"></div> -->
    <div class="row-fluid ">
      <div class="span9">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-bar-chart"></i></span>
            <span class="label label-success pull-right "><a href="/alarm/alarmcharts.html"><font color=#EEEEEE>点击详情</font></a></span>
            <h5>告警展示</h5>
          </div>
          <div class="widget-content" style="height:410px">
            <div id="main" style="width: 100%;height:100%;"></div>
          </div>
        </div>
      </div>
      <div class="span3">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-globe"></i></span>
            <span class="label label-success pull-right "><a href="/dns/domaininfo.html"><font color=#EEEEEE>点击详情</font></a></span>
            <h5>域名统计</h5>
          </div>
          <div class="widget-content">
            <div class="todo">
              <ul>
                <li class="clearfix">
                  <div class="txt" ><strong><a id='domaininfo_count' href="/dns/domaininfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;条域名信息</small></div>
                </li>
                <li class="clearfix">
                  <div class="txt" ><strong><a id='dnsinfo_count' href="/dns/dnsinfo.html" style="color:#428BCA;font-size:20px;font-family:Arial">null</a></strong><small>&nbsp;条DNS信息</small></div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-lock"></i></span>
            <h5>最后登录统计TOP 5</h5>
          </div>
          <div class="widget-content">
            <div class="todo">
              <ul>
                <li class="clearfix">
                  <!-- <div class="txt"><span style="font-family:Arial" id='aaa'></span></div> -->
                  <div class="text-left" id='last_username' style="float:left"><strong><a style="color:#428BCA;font-size:12px;font-family:Arial">用户名</a></strong><br></div>
                  <div class="text-left" id='last_name' style="float:left"><strong><a style="color:#428BCA;font-size:12px;font-family:Arial">姓名</a></strong><br></div>
                  <div class="text-center" id='last_time' style="float:right"><strong><a style="color:#428BCA;font-size:12px;font-family:Arial">最后登录时间</a></strong><br></div>
                </li>                
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row-fluid">
      <div class="span12">
          {% for i in last_login %}
        <marquee direction="left" behavior="alternate" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="{{ i.3 }}"><span class="label label-info">{{ i.0 }}</span><span class="label label-warning">{{ i.1 }}</span><span class="label label-important">{{ i.2 }}</span></marquee>
          {% endfor %}
        </div>
    </div>

  </div>

{% endblock %}
